<template>
  <div>
    <h3>各级各类体校调查统计表</h3>
    <div class="container">
      <vxe-toolbar>
        <template #buttons>
          <el-row type="flex" :gutter="10">
            <el-col :span="4" style="display: flex;">
              <el-date-picker
                v-model="searchForm.year"
                value-format="yyyy"
                type="year"
                @change="changeYear"
                placeholder="选择年份"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4" style="display: flex;">
              <el-select
                v-model="searchForm.orgIdStr"
                size="small"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="选择单位名称"
              >
                <el-option
                  :label="item.orgName"
                  :value="item.orgId"
                  v-for="(item, index) in orgData"
                  :key="index"
                ></el-option>
              </el-select>
              <el-button type="success" size="small" @click="selectOrgAll"
                >全选</el-button
              >
            </el-col>

            <el-col :span="5" style="display: flex;">
              <el-button
                type="success"
                size="small"
                icon="el-icon-s-promotion"
                @click="getGroundAll"
                style="margin: 0 10px;"
              >
                搜索</el-button
              >
              <vxe-button
                @click="clearTableFilter"
                status="warning"
                icon="el-icon-refresh-right"
              >
                清空</vxe-button
              >
            </el-col>
          </el-row>
        </template>
      </vxe-toolbar>
      <vxe-table
        resizable
        ref="XTable"
        show-overflow
        border
        max-height="800"
        stripe
        highlight-hover-row
        highlight-current-row
        resizable
        :loading="loading"
        :data="dataList"
      >
        <vxe-table-column
          field="createDate"
          title="填报时间"
          sortable
        ></vxe-table-column>
        <vxe-table-column
          field="writePeople"
          title="填报人"
          sortable
        ></vxe-table-column>
        <vxe-table-column
          field="bureauOrgName"
          title="填报机构"
          sortable
        ></vxe-table-column>
        <vxe-table-column
          field="writePhone"
          title="联系电话"
          sortable
        ></vxe-table-column>
        <vxe-table-column field="" title="操作" width="110">
          <template #default="{ row,rowIndex }">
            <el-button
              @click="examine(row, rowIndex)"
              type="success"
              size="medium"
              icon="el-icon-view"
              circle
            ></el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        :loading="loading"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :total="page.totalResult"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total'
        ]"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
    <vxe-modal
      show-zoom
      v-model="insertModal"
      width="90%"
      height="1000px"
      title="全国各级各类体校调查统计表"
    >
      <SportsSchoolQuestionnaire
        ref="datalist"
        :Alldata="Alldata"
      ></SportsSchoolQuestionnaire>
    </vxe-modal>
  </div>
</template>

<script>
// import VueQr from "vue-qr";
import {
  totalselect2,
  selectSheet2,
  all_sheet_orgName
} from "@/api/statistics.js";

import SportsSchoolQuestionnaire from "./components/SportsSchoolQuestionnaire1.vue";
import moment from "moment";
export default {
  components: {
    SportsSchoolQuestionnaire

    // VueQr
  },
  data() {
    return {
      orgData: [],
      Alldata: {},
      defaultDataList: [],
      dataList: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      loading: false,
      filterName: "",
      insertModal: false,
      codeOpen: false,
      search: false,
      searchForm: {
        orgIdStr: [],
        year: moment().format("YYYY")
      }
    };
  },
  created() {
    this.getGroundAll();
    this.selectschool();
  },

  methods: {
    //查看提交的表单
    examine(row, rowIndex) {
      const data = {
        orgName: row.bureauOrgName
      };
      this.insertModal = true;
      totalselect2(data).then(res => {
        res.data.bean.fSheet2dList = res.data.fSheet2dMapList;
        this.Alldata = res.data.bean;
        this.$refs.datalist.submit();
      });
    },

    //数据
    getGroundAll() {
      const data = {
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
        year: this.searchForm.year,
        orgIdStr: this.searchForm.orgIdStr.join(",")
      };
      selectSheet2(data).then(res => {
        this.dataList = res.data.dataList;
        this.page.totalResult = res.data.countNum;
      });
      this.defaultDataList = this.dataList;
      this.searchProps = Object.keys(this.dataList[0]);
    },

    //清空
    clearTableFilter() {
      this.searchForm = {
        orgIdStr: []
      };
      (this.page.pageNum = 1), (this.page.pageSize = 10), this.getOrg4player();
    },

    //全选
    selectOrgAll() {
      this.searchForm.orgIdStr = [];
      this.orgData.forEach(item => {
        this.searchForm.orgIdStr.push(item.orgId);
      });
    },

    //根据时间来获取新的学校
    changeYear() {
      this.selectschool();
    },
    //查全部机构
    selectschool() {
      all_sheet_orgName().then(res => {
        this.orgData = res.data;
      });
    },

    //快捷搜索
    searchEvent() {
      const filterName = this.$XEUtils
        .toValueString(this.filterName)
        .trim()
        .toLowerCase();
      if (filterName) {
        const filterRE = filterName;
        const searchProps = this.searchProps;
        const rest = this.defaultDataList.filter(item =>
          searchProps.some(
            key =>
              this.$XEUtils
                .toValueString(item[key])
                .toLowerCase()
                .indexOf(filterName) > -1
          )
        );
        this.dataList = rest.map(row => {
          const item = Object.assign({}, row);
          searchProps.forEach(key => {
            item[key] = this.$XEUtils
              .toValueString(item[key])
              .replace(filterRE, match => match);
          });
          return item;
        });
        this.page = {
          currentPage: 1,
          pageSize: this.dataList.length,
          totalResult: this.dataList.length
        };
        this.search = true;
      } else {
        this.dataList = this.defaultDataList;
      }
    },

    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.getGroundAll();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  padding: 10px;
}
</style>
